<template>
    <div id="dataChart" style="width:100%;height:100%">
        <div class="datacon">
            <!-- <p><em>{{dataInfo.daiban}}</em>待分配诉求</p>
        <p><em>{{dataInfo.shouli}}</em>已分配诉求</p>
            <p><em>{{dataInfo.quanbu}}</em>待处理诉求</p>-->
            <div class="flexbox" @click="willdo">
                <div class="tit">
                    <i class="iconfont icon-nianjianzhouqi"></i>待办项
                </div>
                <span>
                    <em>{{dataInfo.daiban}}</em>件
                </span>
            </div>
            <div class="flexbox" @click="doing">
                <div class="tit">
                    <i class="iconfont icon-jiekuanchulizhong2"></i>进行中
                </div>
                <span>
                    <em>{{dataInfo.shouli}}</em>件
                </span>
            </div>
            <div class="flexbox" @click="done">
                <div class="tit">
                    <i class="iconfont icon-mulubianzhitubiao"></i>已归档
                </div>
                <span>
                    <em>{{dataInfo.guidang}}</em>件
                </span>
            </div>
            <!-- <div class="flexbox">
          <span>

            <em>{{dataInfo.shensu}}</em>
            待处理申诉
          </span>
            </div>-->
        </div>
    </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl.js";
export default {
    data() {
        return {
            dataInfo: {
                daiban: 0,
                quanbu: 0,
                shouli: 0,
                shensu: 0,
                genjin: 0
            }
        };
    },
    methods: {
        willdo() {
            $(".scroll-y").animate({ scrollTop: 350 }, 300);
        },
        done() {
            this.$router.push({ path: "/placeFileList" });
        },
        doing() {
            this.$router.push({ path: "/superviseList" });
        },
        getInfo() {
            var _this = this;
            actionurl.userAnalysis({}, function(re) {
                _this.dataInfo = {
                    daiban: re.data.daiban,
                    quanbu: re.data.quanbu,
                    shouli: re.data.shouli,
                    shensu: re.data.shensu,
                    guidang: re.data.guidang
                };
            });
        }
    },
    mounted() {
        this.getInfo();
    },
    created() {}
};
</script>
<style lang="scss" scoped>
@mixin arrow($color) {
    content: "";
    position: absolute;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 30px;
    border-color: transparent transparent transparent $color;
    z-index: 1;
}
@mixin bigarrow($color) {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 135px 135px;
    border-color: transparent transparent $color transparent;
    z-index: 1;
    top: 0;
    left: 0;
}
.datacon {
    height: 272px;

    // width: 365px;
    margin: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .flexbox {
        cursor: pointer;
        .tit {
            background: rgba(0, 0, 0, 0.3);
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                margin-right: 5px;
            }
        }
        width: 30%;
        height: 135px;
        border-radius: 5px;
        overflow: hidden;
        background: #eb8382;
        color: #fff;
        font-size: 16px;
        // display: flex;
        // align-items: center;
        // flex-flow: column;
        // justify-content: center;
        position: relative;
        &:nth-child(2) {
            background: #eeca50;
        }
        &:nth-child(3) {
            background: #3fcdc1;
        }
    }
    span {
        height: 95px;
        display: flex;
        align-items: center;
        justify-content: center;
        em {
            font-size: 40px;
            margin-right: 5px;
            display: inline-block;
        }
    }
}
@media screen and (max-width: 1600px) {
    .datacon {
        .flexbox {
            .tit {
                font-size: 14px;
            }
            span {
                em {
                    font-size: 34px;
                }
            }
        }
    }
}
</style>
